<template>
	<view class="content">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bg-color="#EEE"></u-tabs>
		<view class="summary" v-if="current == 0">前一日新增<text class="count">{{prevDateTotal || "--"}}</text>例阳性，详细情况见下图：
		</view>
		<view class="summary" v-if="current == 1">前一周共新增<text class="count">{{prevWeekTotal || "--"}}</text>例阳性，详细情况见下图：
		</view>
		<!-- 数据分类依据 -->
		<u-form :model="formData" ref="uForm">
			<u-form-item label="分类依据">
				<u-radio-group v-model="formData.showAccordingBy" @change="radioGroupChange">
					<u-radio name="district">按区县</u-radio>
					<u-radio name="status">按症状</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<!-- 不同的时间段 -->
		<view v-if="current == 0">
			<PiePic v-if="showChartData1" :chartData="chartData1"></PiePic>
			<view v-else class="no-data">暂无数据</view>
		</view>
		<view v-else-if="current == 1">
			<BarPic v-if="showChartData2" :chartData="chartData2"></BarPic>
			<view v-else class="no-data">暂无数据</view>
		</view>
	</view>
</template>

<script>
	let me;
	import PiePic from "@/components/echarts/pie.vue"
	import BarPic from "@/components/echarts/line.vue"
	import funcs from "@/static/js/func.js"
	export default {
		components: {
			PiePic,
			BarPic,
		},
		data() {
			return {
				list: [{
					name: '前一日'
				}, {
					name: '前一周'
				}],
				current: 0,
				formData: {
					showAccordingBy: "district",
				},
				prevDateTotal: "",
				prevWeekTotal: "",
				showChartData1: false,
				showChartData2: false,
				chartData1: {},
				chartData2: {},
				timeStart: "",
				timeEnd: "",
				// 前一周
				prevWeekDates: [],
			};
		},
		onShow() {
		},
		onLoad() {
			me = this;
			/**
			 * 一进页面，就要按照默认的查询条件去查询
			 */
			// 当前时间点减24小时，然后再算凌晨和夜间的起始时间段
			let d = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
			let year = d.getFullYear(),
				month = d.getMonth() + 1,
				date = d.getDate();
			me.timeStart = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 00:00:00`;
			me.timeEnd = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 23:59:59`;
			// 先去查询昨日新增的总数和详情
			me.getTotal()
			me.getBingliData();
			// 构造一个数组，近七天的日期。等切换近一周的时候，根据后端返回的日期和数组对比，构造折线图的数据
			for (var i = 0; i < 7; i++) {
				me.prevWeekDates.push(getYearMonthDate(new Date(new Date().getTime() - (7 - i) * 24 * 60 * 60 * 1000)));
			}

			function getYearMonthDate(timestamp) {
				let d = new Date(timestamp);
				let year = d.getFullYear(),
					month = d.getMonth() + 1,
					date = d.getDate();
				return `${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date}`;
			}
		},
		methods: {
			/**
			 * tab页切换时要重新查询

			 * @param {Object} index 当前tab下标
			 */
			change(index) {
				me.current = index;
				if (index == 0) {
					// 当前时间点减24小时，然后再算凌晨和夜间的起始时间段
					let d = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
					let year = d.getFullYear(),
						month = d.getMonth() + 1,
						date = d.getDate();
					me.timeStart = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 00:00:00`;
					me.timeEnd = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 23:59:59`;
				} else {
					// 当前时间点减7*24小时，然后再算凌晨的起始时间段
					let d = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
					let year = d.getFullYear(),
						month = d.getMonth() + 1,
						date = d.getDate();
					me.timeStart = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 00:00:00`;
					// 当前时间点减24小时，然后再算夜间的结束时间段
					let d1 = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
					let year1 = d1.getFullYear(),
						month1 = d1.getMonth() + 1,
						date1 = d1.getDate();
					me.timeEnd =
						`${year1}-${month1 > 9 ? month1 : "0" + month1}-${date1 > 9 ? date1 : "0" + date1} 23:59:59`;
				}
				me.getBingliData();
				me.getTotal();
			},
			/**
			 * 分类依据变化时也要重新查询

			 * @param {Object} e 当前分类依据
			 */
			radioGroupChange(e) {
				me.getBingliData();
			},
			/**
			 * 根据选择的时间跨度去查询新增数量
			 */
			getTotal() {
				if (me.current == 0) {
					me.getPrevDateTotal();
				} else {
					me.getPrevWeekTotal();
				}
			},
			/**
			 * 根据选择的时间跨度去查询病例数据
			 */
			getBingliData() {
				if (me.current == 0 && me.formData.showAccordingBy == "district") { // 查询前一日，按行政区分类
					me.getYangListByDistrict();
				} else if (me.current == 0 && me.formData.showAccordingBy == "status") { // 查询前一日，按症状类型分类
					me.getYangListByStatus();
				} else if (me.current == 1 && me.formData.showAccordingBy == "district") { // 查询前一周，按行政区分类
					me.getPrevWeekYangListByDistrict();
				} else if (me.current == 1 && me.formData.showAccordingBy == "status") { // 查询前一周，按症状类型分类
					me.getPrevWeekYangListByStatus();
				}
			},
			/**
			 * 查询昨日新增总数
			 */
			getPrevDateTotal() {
				me.$api.requestTask("/bingliManage/getYangTotal", {
					timeStart: me.timeStart,
					timeEnd: me.timeEnd
				}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						me.prevDateTotal = res.data + "";
					} else {
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading();
					me.showChartData1 = false;
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			/**
			 * 查询前一周新增总数
			 */
			getPrevWeekTotal() {
				me.$api.requestTask("/bingliManage/getYangTotal", {
					timeStart: me.timeStart,
					timeEnd: me.timeEnd
				}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						me.prevWeekTotal = res.data;
					} else {
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading();
					me.showChartData1 = false;
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			/**
			 * 查询前一日，按行政区分类
			 */
			getYangListByDistrict() {
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/bingliManage/getYangListByDistrict", {
					timeStart: me.timeStart,
					timeEnd: me.timeEnd
				}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						let data = {
							series: [{
								data: res.data.map(item => {
									return {
										name: item.districtName,
										value: item.num
									}
								})
							}]
						}
						me.showChartData1 = res.data.length > 0 ? true : false;
						me.chartData1 = JSON.parse(JSON.stringify(data));
					} else if (res.msg == "token无效" || res.msg == "请先登录" || res.msg == "登录已过期") {
						uni.clearStorageSync();
						uni.switchTab({
							url: "/pages/tabbar/tabbar-4/tabbar-4"
						})
					} else {
						me.showChartData1 = false;
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading();
					me.showChartData1 = false;
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			/**
			 * 查询前一日，按症状类型分类
			 */
			getYangListByStatus() {
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/bingliManage/getYangListByStatus", {
					timeStart: me.timeStart,
					timeEnd: me.timeEnd
				}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						let data = {
							series: [{
								data: res.data.map(item => {
									return {
										name: item.name,
										value: item.num
									}
								})
							}]
						}
						me.showChartData1 = res.data.length > 0 ? true : false;
						me.chartData1 = JSON.parse(JSON.stringify(data));
					} else if (res.msg == "token无效" || res.msg == "请先登录") {
						uni.clearStorageSync();
						uni.switchTab({
							url: "/pages/tabbar/tabbar-4/tabbar-4"
						})
					} else {
						me.showChartData1 = false;
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading()
					me.showChartData1 = false;
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			/**
			 * 查询前一周，按行政区分类
			 */
			getPrevWeekYangListByDistrict() {
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/bingliManage/getPrevWeekYangListByDistrict", {
					timeStart: me.timeStart,
					timeEnd: me.timeEnd
				}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						console.log(11, res.data);
						me.renderPrevWeek(res.data);
					} else if (res.msg == "token无效" || res.msg == "请先登录") {
						uni.clearStorageSync();
						uni.switchTab({
							url: "/pages/tabbar/tabbar-4/tabbar-4"
						})
					} else {
						me.showChartData1 = false;
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading()
					me.showChartData1 = false;
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			/**
			 * 查询前一周，按症状类型分类
			 */
			getPrevWeekYangListByStatus() {
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/bingliManage/getPrevWeekYangListByStatus", {
					timeStart: me.timeStart,
					timeEnd: me.timeEnd
				}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						console.log(22, res.data);
						me.renderPrevWeek(res.data);
					} else if (res.msg == "token无效" || res.msg == "请先登录") {
						uni.clearStorageSync();
						uni.switchTab({
							url: "/pages/tabbar/tabbar-4/tabbar-4"
						})
					} else {
						me.showChartData1 = false;
						funcs.showModalTips(res.msg || "查询失败，请稍后再试")
					}
				}, err => {
					uni.hideLoading()
					me.showChartData1 = false;
					funcs.showModalTips("对不起，系统错误，请稍后再试")
				})
			},
			/**
			 * 拿到前一周的数据，转成格式化数据，传给Echarts插件
			 */
			renderPrevWeek(pageData) {
				// 先按行政区或症状合并数据
				let series = {};
				pageData.forEach(item => {
					if (!series[item.name]) {
						series[item.name] = [{
							date: item.date,
							num: item.num
						}];
					} else {
						series[item.name].push({
							date: item.date,
							num: item.num
						});
					}
				})
				// 没有数据的日期，要设置为0
				let series11 = [];
				for (let k in series) {
					let numList = [];
					for (var i = 0; i < me.prevWeekDates.length; i++) {
						let thisDateData = series[k].filter(item => {
							return item.date.indexOf(me.prevWeekDates[i]) > -1
						})
						if (thisDateData.length > 0) {
							numList.push(thisDateData[0].num);
						} else {
							numList.push(0);
						}
					}
					series11.push({
						name: k,
						emphasis: {
							focus: 'series'
						},
						data: numList
					})
				}
				console.log("series11", series11, me.prevWeekDates);
				let res = {
					categories: me.prevWeekDates,
					series: series11
				}
				me.showChartData2 = true;
				me.chartData2 = JSON.parse(JSON.stringify(res));
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		.summary {
			font-size: 1.2em;
			font-weight: bold;

			.count {
				color: red;
				font-size: 1.4em;
			}
		}

		.u-form {
			padding-left: 24rpx;

			/deep/.u-form-item {
				.u-form-item__body {
					display: flex;
					justify-content: space-between;

					.u-form-item--left {
						width: auto !important;
						flex: auto !important;
					}
				}
			}
		}

		.no-data {
			text-align: center;
			margin-top: 20vh;
		}
	}
</style>